<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      :data="data"
      :option="option"
      :page.sync="page"
      @on-load="rowLoad"
      @search-change="searchChange"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @row-save="rowSave"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template slot-scope="{ type, size, row, index }" slot="menu">
        <el-button
          icon="el-icon-document-checked"
          :size="size"
          :type="type"
          @click="handleApprove(row, index)"
          >审批</el-button
        >
      </template>
    </avue-crud>
    <el-drawer title="审批" :visible.sync="drawer">
      <div class="demo-drawer__content" style="width: 100%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="审批意见" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="1">同意</el-radio>
              <el-radio :label="-1">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审批说明" prop="opinion">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入审批意见"
              v-model="ruleForm.opinion"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span class="avue-dialog__footer avue-dialog__footer--right">
        <el-button @click="$refs.drawer.closeDrawer()">取 消</el-button>
        <el-button type="primary" @click="submitForm"> 确 定 </el-button>
      </span>
    </el-drawer>
  </basic-container>
</template>

<script>
import avue from "@/mixins/avue.js";
import { SE } from "@/common/constants.js";
import {
  reservation_page,
  reservation_edit,
  reservation_add,
  reservation_delete,
  reservation_approve,
} from "@/api/alumni";

export default {
  mixins: [avue],
  data() {
    return {
      drawer: false,
      data: [],
      option: {
        addBtn: false,
        editBtn: false,
        column: [
          {
            label: "姓名",
            prop: "name",
            search: true,
          },
          {
            label: "联系方式",
            prop: "phone",
            align: "left",
            search: true,
          },
          {
            label: "返校时间",
            prop: "time",
          },
          {
            label: "希望看到老师",
            prop: "teacher",
          },
          {
            label: "是否就餐",
            prop: "teacher",
          },
          {
            label: "入校事由",
            prop: "reason",
          },
          {
            label: "状态",
            prop: "status",
            type: "radio",
            dicData: [
              {
                value: -1,
                text: "审核不通过",
              },
              {
                value: 0,
                text: "审核中",
              },
              {
                value: 1,
                text: "审核通过",
              },
            ],
            props: {
              label: "text",
              value: "value",
            },
          },
        ],
      },
      ruleForm: {
        status: "",
        opinion: "",
      },
      rules: {
        status: [
          { required: true, message: "请选择审批意见", trigger: "blur" },
        ],
        // opinion: [
        //   { required: true, message: "请选择活动区域", trigger: "change" },
        // ],
      },
    };
  },
  methods: {
    handleApprove(row) {
      this.drawer = true;
      this.form = row;
    },
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.ruleForm.id = this.form.id;
          reservation_approve(this.ruleForm).then((res) => {
            if (this.$s.suc(res)) {
              this.drawer = false;
              this.rowLoad();
            }
          });
        } else {
          return false;
        }
      });
    },
    rowLoad() {
      reservation_page(this.params).then((res) => {
        let result = this.$s.res(res);
        this.data = result.records;
        this.page.total = result.totalPage;
      });
    },
    rowSave(row, loading, done) {
      reservation_add(row)
        .then((res) => {
          this.$s.suc(res);
        })
        .then(() => {
          this.rowLoad();
          done();
          loading();
        });
    },
    rowUpdate(row, index, done, loading) {
      reservation_edit(row)
        .then((res) => {
          this.$s.suc(res);
        })
        .then(() => {
          this.rowLoad();
          done();
          loading();
        });
    },
    rowDel(row, index, done) {
      this.$confirm("确定数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          reservation_delete({ id: row.id }).then((res) => {
            this.$s.suc(res);
          });
        })
        .then(() => {
          this.rowLoad();
          done();
        });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.demo-drawer__content {
  width: 100%;
  padding: 20px;
}
</style>
